<script setup lang="ts">
// https://img2.baidu.com/it/u=60856268,584589370&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=800
// https://img0.baidu.com/it/u=552300501,3499124980&fm=253&fmt=auto?w=684&h=684

import { ref } from 'vue'
const imgSrc = ref(
  'https://img2.baidu.com/it/u=3861723532,3176837490&fm=253&fmt=auto&app=120&f=JPEG?w=667&h=500'
)

const imgTitle = ref('ikun')

const changeImg = () => {
  imgSrc.value =
    'https://img1.baidu.com/it/u=4158001183,3846058571&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=500'
  imgTitle.value = '只因你太美'
}

// 类的绑定
const isRed = ref(true)
</script>

<template>
  <!-- 推荐简写 :xxx 即可 -->
  <img :src="imgSrc" :title="imgTitle" alt="" />
  <!-- 用的不多了解即可 -->
  <!-- <img v-bind:src="imgSrc" alt="" /> -->
  <button @click="changeImg">切换图片地址</button>

  <!-- 动态的绑定 class -->
  <!-- <div class="box red border"></div> -->
  <!-- :class="{red:true,border:true}"
        key 绑定给组件的类名
        :之后的表达式，该类名是否生效 
   -->
  <div @click="isRed = !isRed" class="box" :class="{ red: isRed, border: true }"></div>
</template>

<style>
img {
  width: 200px;
}
.box {
  width: 100px;
  height: 100px;
  border: 1px red solid;
}
.red {
  background-color: red;
}
.border {
  border: 10px orange solid;
}
</style>
